<template>
    <view class="detection-container" id="dcte">
        <!-- 固定顶部提示 -->
        <view class="tip-header">
            <text class="tip-text">本检测报告基于平台随机抽样盲检，检测结果仅与该送检产品有关。检测报告仅作为平台内部质量控制之用。</text>
        </view>

        <!-- 可滚动的检测报告列表 -->
        <!-- <scroll-view class="report-list" scroll-y="true" style="height: 100vh" @scrolltolower="reachBottom"> -->
        <view class="report-list">
            <view class="container">
                <view class="cont-box"
                    :style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + 0.5 + '%' }"
                    v-for="(numVal, index) in flowData.column" :key="numVal">
                    <view class="content-card" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
                        <view class="report-grid">
                            <!-- 检测报告卡片 -->
                            <view class="report-card">
                                <view class="card-main">
                                    <!-- 产品图片 -->
                                    <image :src="item.product_pic" mode="aspectFill" class="product-image"
                                        @click.stop="() => gotPro(item.proid)"></image>
                                    <!-- 检测标签 -->
                                    <!-- <view class="detection-badge">
                                        <image src="../static/img/album.png" class="badge-icon"></image>
                                        <text>和大检测</text>
                                        <text class="report-count">{{ item.reportCount }}</text>
                                    </view> -->
                                    <!-- 通过报告数 -->
                                    <view class="pass-report">
                                        {{ item.time }}份报告
                                    </view>
                                </view>

                                <view class="product-t" @click.stop="() => goToReport(item.proid)">
                                    <!-- 产品名称 @click="goToReport(item)"-->
                                    <text class="product-name">{{ item.product_name }}</text>

                                    <!-- 检测信息 -->
                                    <view class="detection-info">

                                        <view class="info-c">
                                            <image src="../static/img/auth.png" class="info-icon"></image>
                                            <view class="info-badge">
                                                <text>{{ app_name }} 检测</text>
                                                <text class="test-count">第{{ item.time }}次</text>
                                            </view>
                                        </view>

                                        <!-- 检测项目列表 -->
                                        <view class="test-items">
                                            <text v-for="(test, testIndex) in item.title" :key="testIndex"
                                                class="test-item">
                                                {{ test }}
                                            </text>
                                        </view>
                                        <!-- 更多报告 -->
                                        <view class="more-reports" v-if="item.pic_num">
                                            <text class="more-text">+{{ item.pic_num }}份检测报告</text>
                                            <image :src="static_url + '/static/img/jiance.png'" class="stamp-image">
                                            </image>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <nomore text="没有更多内容了" v-if="nomore"></nomore>
        </view>
        <!-- </scroll-view> -->
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            app_name: app.globalData.initdata.name || '',
            static_url: app.globalData.static_url,
            reportList: [
                // {
                //     image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                //     name: '牦牛纯牛奶牦牛纯牛奶牦牛纯牛奶牦牛纯牛奶',
                //     reportCount: '8份报告',
                //     passNumber: '113',
                //     testCount: '8',
                //     testItems: [
                //         '通过内二醛及三聚氰胺检测通过内二醛及三聚氰胺检测通过内二醛及三聚氰胺检测通过内二醛及三聚氰胺检测',
                //         '通过111项兽残检测',
                //         '通过和大1项微生物检测',
                //         '通过和大2项理化检测',
                //         '通过和大1项兽残其他类检测'
                //     ],
                //     moreReports: 3
                // }
            ],
            flowData: {
                list: [], // 数据值
                column: 2, // 瀑布列数
                columnSpace: 2 // 瀑布列宽间距
            },
            pagelimit: 10,
            pagenum: 1,
            nomore: false,
            canload: true,
        }
    },
    created() {
        /* 初始化每一列的数据 */
        for (let i = 1; i <= this.flowData.column; i++) {
            this.$set(this.flowData, `column_${i}`, []);
        }
    },
    onLoad() {
        this.getdata();
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
        this.checkScrollBottom();
    },
    methods: {
        getdata() {
            let that = this;
            that.canload = false
            app.showLoading('加载中');
            app.get('ShopProductDetection/list', { page: that.pagenum, limit: that.pagelimit }, function (res) {
                if (res.status == 200) {
                    if (res.data.length == 0) {
                        that.nomore = true;
                    } else {
                        let cl = res.data;
                        that.flowData.list = that.flowData.list.concat(cl);
                    }

                    that.$nextTick(() => {
                        that.initData(); // 数据初始化
                    });
                } else {
                    app.error(res.msg)
                }
                app.showLoading(false);
                that.canload = true
            });

        },

        checkScrollBottom() {
            uni.createSelectorQuery().select('#dcte').boundingClientRect(res => {
                if (!res) return;

                // 获取可视区域高度
                uni.getSystemInfo({
                    success: (sysRes) => {
                        // 判断是否接近底部（这里设置距离底部50px触发）
                        const isReachBottom = res.height - (this.scrollTop + sysRes.windowHeight) < 50;

                        if (isReachBottom && !this.loading) {
                            this.reachBottom()
                        }
                    }
                });
            }).exec();
        },
        /* 数据初始化 */
        initData() {
            const groupList = this.dynamicGrouping(this.flowData.list, this.flowData.column); // 数据动态分组
            groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item));
        },
        /** 数据动态分组
         * @param {Object} data 分组的数据列表
         * @param {Object} i 需要分几组
         * @returns {Array} groups 已分组的数据
         */
        dynamicGrouping(data, i) {
            if (i <= 0) return "分组数必须大于0";
            const groups = [];
            for (let j = 0; j < i; j++) {
                groups.push([]);
            }
            for (let k = 0; k < data.length; k++) {
                const groupIndex = k % i;
                groups[groupIndex].push(data[k]);
            }
            return groups;
        },
        goToReport(id) {
            app.goto(`/pagesSocial/detection/report?proid=` + id);
        },
        gotPro(id) {
            app.goto('/pages/shop/product?id=' + id)
        },
        reachBottom() {
            // console.log('到底')
            // this.couponList = [...this.couponList, ...this.couponList]
            if (!this.nomore && this.canload) {
                this.pagenum += 1;
                this.getdata();
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.detection-container {
    // min-height: 100vh;
    // background: #f0f9f6;

    .tip-header {
        padding: 24rpx;
        position: sticky;
        top: 0;
        z-index: 100;

        .tip-text {
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
            z-index: 101;
        }

        ::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(237, 234, 234, 0.5);
            z-index: -1;
            backdrop-filter: blur(10px);
        }
    }

    .report-list {
        padding: 20rpx;
        overflow-y: auto;
        // .report-grid {
        //     display: flex;
        //     flex-wrap: wrap;
        //     margin: 0 -10rpx;
        // }

        .container {
            display: flex;
            justify-content: space-between;
            // padding: 20rpx;
            $borderRadius: 12rpx;

            .cont-box {
                width: var(--layout-width);


                .content-card {
                    break-inside: avoid;
                    width: 100%;
                    margin-bottom: 20rpx;
                    background: #fff;
                    border-radius: 12rpx;
                    overflow: hidden;
                    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
                    display: inline-block;

                    .report-card {
                        // width: calc(50% - 20rpx);
                        // margin: 10rpx;
                        // background: #fff;
                        // border-radius: 20rpx;
                        // overflow: hidden;

                        .card-main {
                            position: relative;
                            width: 100%;
                            height: 300rpx;

                            .product-image {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }

                            .detection-badge {
                                position: absolute;
                                left: 16rpx;
                                top: 16rpx;
                                background: rgba(255, 255, 255, 0.9);
                                border-radius: 30rpx;
                                padding: 6rpx 12rpx;
                                display: flex;
                                align-items: center;

                                .badge-icon {
                                    width: 28rpx;
                                    height: 28rpx;
                                    margin-right: 6rpx;
                                }

                                text {
                                    font-size: 22rpx;
                                    color: #333;
                                }

                                .report-count {
                                    color: #00b578;
                                    margin-left: 6rpx;
                                }
                            }

                            .pass-report {
                                position: absolute;
                                right: 16rpx;
                                bottom: 16rpx;
                                background: rgba(230, 248, 244, 0.9);
                                border-radius: 30rpx;
                                padding: 6rpx 16rpx;
                                font-size: 24rpx;
                                color: #2AC2A2;
                            }
                        }

                        .product-t {
                            background: linear-gradient(230deg, #CBF8EB 0%, #f5f5f5 50%);

                            .product-name {
                                display: block;
                                font-size: 28rpx;
                                color: #333;
                                font-weight: bold;
                                padding: 16rpx;
                            }

                            .detection-info {
                                // background: #f8f8f8;
                                // margin: 0 16rpx 16rpx;
                                border-radius: 12rpx;
                                padding: 16rpx;

                                .info-c {
                                    display: flex;
                                    align-items: center;
                                    margin-bottom: 16rpx;


                                    .info-icon {
                                        width: 60rpx;
                                        height: 60rpx;
                                    }



                                    .info-badge {
                                        display: inline-flex;
                                        align-items: center;
                                        background: #2FAA8F;
                                        border-radius: 10rpx;
                                        padding: 6rpx;
                                        margin-left: -20rpx;
                                        padding-left: 25rpx;

                                        text {

                                            font-size: 22rpx;
                                            color: #fff;
                                            padding: 3rpx 3rpx;
                                        }

                                        .test-count {
                                            color: #00b578;
                                            margin-left: 6rpx;
                                            background-color: #fff;
                                            border-radius: 10rpx;
                                        }
                                    }

                                }

                                .test-items {
                                    .test-item {
                                        display: block;
                                        font-size: 24rpx;
                                        color: #666;
                                        line-height: 2;
                                    }
                                }

                                .more-reports {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    margin-top: 16rpx;
                                    padding-top: 16rpx;
                                    border-top: 1px solid rgba(0, 0, 0, 0.1);

                                    .more-text {
                                        font-size: 26rpx;
                                        color: #999;
                                    }

                                    .stamp-image {
                                        width: 60rpx;
                                        height: 60rpx;
                                        opacity: 0.6;
                                        transform: rotate(30deg);
                                    }
                                }
                            }

                        }
                    }

                }

            }
        }


    }
}
</style>
